<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的页面</title>
		<script type="text/javascript" src="./js/vue.js"></script>
		<script type="text/javascript" src="./js/pagination.js"></script>
		<script type="text/javascript" src="./js/jquery.min.js"></script>
		<script type="text/javascript" src="./js/axios.js"></script>
		<script type="text/javascript" src="./js/bootstrap.min.js"></script>
		<script type="text/javascript" src="./js/dcalendar.picker.js"></script>
		<script src="./js/validate.js"></script>
			
		<link rel="stylesheet" href="./css/bootstrap.css">
		<link rel="stylesheet" href="./css/dcalendar.picker.css">
	</head>
	<body>
		<div id="app" class="container">
			<button type="button" class="btn btn-success" @click="toShowUserModel">修改个人信息</button>
			<button type="button" class="btn btn-success" @click="toShowPwdrModel">修改密码</button>
			<button type="button" class="btn btn-success" @click="toShowPhonerModel">修改手机号</button>
			<table class="table table-bordered table-striped table-hover" style="text-align: center;">
				<tr>
					<td colspan="2">
						<h3>个人信息</h3>
					</td>
				</tr>
				<tr>
					<td>昵称</td>
					<td>{{user.nickname}}</td>
				</tr>
				<tr>
					<td>性别</td>
					<td>{{user.gebder}}</td>
				</tr>
				<tr>
					<td>头像</td>
					<td>
						<img :src="user.image" width="50px" height="50px" />
					</td>
				</tr>
				<tr>
					<td>注册时间</td>
					<td>{{user.registrationtime | formatDate}}</td>
				</tr>
			</table>
			
			<div id="myModalUser" class="modal fade" tabindex="-1" role="dialog">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-body">
							<div class="form-group" style="text-align: center;">
								<label>
									<h2>修改个人信息</h2>
								</label>
							</div>
							<form action="http://localhost:10010/api/item/user/updategerenxinxi" id="form_user" method="post" enctype="multipart/form-data">
								<div class="form-group">
									<label for="nickname">昵称</label>
									<div class="controls">
										<input type="hidden" name="userid" v-model="user.userid" />
										<input type="text" class="form-control" id="nickname" name="nickname" v-model="user.nickname" >
									</div>
								</div>
								<div class="form-group">
									<label for="file">头像</label>
									<div class="">
										<input type="file" id="file" name="file">
										<img :src="user.image" width="50px" height="50px" />
									</div>
								</div>
								<div class="form-group">
										<label for="gebder">性别</label>
										<div class="controls">
											<input type="text" class="form-control" id="gebder" name="gebder" v-model="user.gebder" >
										</div>
								</div>
								<div class="modal-footer">
									<div class="form-group">
										<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
										<button type="submit" class="btn btn-primary" @click="updateUser">提交</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
			
			
			<div id="myModalPwd" class="modal fade" tabindex="-1" role="dialog">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-body">
							<div class="form-group" style="text-align: center;">
								<label>
									<h2>修改密码</h2>
								</label>
							</div>
							<div class="form-group">
									<label for="password">旧密码</label>
									<div class="controls">
										<input type="password" class="form-control" id="password" name="password" v-model="user.password" >
									</div>
							</div>
							<div class="form-group">
									<label for="password2">新密码</label>
									<div class="controls">
										<input type="password" class="form-control" id="password2" name="password2" v-model="password" >
									</div>
							</div>
							<div class="form-group">
									<label for="password3">确认密码</label>
									<div class="controls">
										<input type="password" class="form-control" id="password3" name="password3" >
									</div>
							</div>
							<div class="modal-footer">
								<div class="form-group">
									<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
									<button type="submit" class="btn btn-primary" @click="updatePwd">提交</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			
			<div id="myModalPhone" class="modal fade" tabindex="-1" role="dialog">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-body">
							<div class="form-group" style="text-align: center;">
								<label>
									<h2>修改手机号</h2>
								</label>
							</div>
							<div class="form-group">
									<label for="phone">手机号</label>
									<div class="controls">
										<input type="text" class="form-control" id="phone" name="phone" v-model="user.phone" >
									</div>
							</div>
							<div class="modal-footer">
								<div class="form-group">
									<button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
									<button type="submit" class="btn btn-primary" @click="updatePhone">提交</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			
			
		</div>
	</body>
	<script>
		var vue=new Vue({
			el:"#app",
			data:{
				user:{
					userid:0,
				},
				password:'',
				user2:{}
			},
			methods:{
				getLoginId(){
					var id1=document.URL.split('=')[1];
					this.user.userid=id1;
					console.log(this.user.userid);
				},
				
				toShowUserModel(){
					$('#myModalUser').modal("show");
				},
				toShowPwdrModel(){
					$('#myModalPwd').modal("show");
				},
				toShowPhonerModel(){
					$('#myModalPhone').modal("show");
				},
				
				updateUser(){
					$("#form_user").submit();
					
					
					
					/* 问题： */
					window.location.href="my.html?id="+this.user.userid;
				},
				updatePwd(){
					this.user.password=this.password;
					axios.post("http://localhost:10010/api/item/user/updateUserpasswordAndphone",this.user).then(function(response){
						$("#myModalPwd").modal("hide");
						alert("修改成功");
					});
				},
				updatePhone(){
					axios.post("http://localhost:10010/api/item/user/updateUserpasswordAndphone",this.user).then(function(response){
						$("#myModalPhone").modal("hide");
						alert("修改成功");
					});
				},
				
				getUserById(){
					axios.post("http://localhost:10010/api/item/user/findUserByuserid?userid="+this.user.userid).then(function(response){
						vue.user=response.data;
					});
				},
			},
			created() {
				this.getLoginId();
				this.getUserById();
			},
			filters : {
				formatDate : function(time) {
					if (time != null && time != "") {
						var date = new Date(time);
						var year = date.getFullYear();
						var month = date.getMonth() + 1;
						month=month<10? "0" +month :month;
						var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			     
						// var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
						// var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
						// var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
						return year+"-"+month+"-"+day;
					} else {
						return "";
					}
				}
			},
		})
	</script>
</html>
